{extend name="layout/iframe_layout" /}

{block name="title"}菜单管理{/block}
{block name="style"}
<style>
.icon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  grid-gap: 10px;
}
.icon-item {
  text-align: center;
  padding: 10px;
  border: 1px solid #eee;
  cursor: pointer;
  border-radius: 5px;
  transition: all 0.2s;
}
.icon-item:hover {
  background: #f5f7fa;
  border-color: #409EFF;
}
.icon-item i {
  font-size: 20px;
  display: block;
  margin-bottom: 5px;
}
</style>

{/block}

{block name="content"}

<div id="app" >
    <div class="app-container">
    <el-form size="small" :inline="true" :model="searchForm" class="demo-form-inline">
      <el-form-item label="关键词">
        <el-input clearable v-model="searchForm.keyword" placeholder="搜索"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="search">查询</el-button>
        <el-button title="添加" type="success" @click="openDialog">添加</el-button>
      </el-form-item>
    </el-form>

    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      row-key="uniqid"
      highlight-current-row
      :load="load"
      lazy
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
    >
        <el-table-column align="center" label="名称" width="180" prop="id">
            <template v-slot:default="{scope,row}">
                {{row.title}}
            </template>
        </el-table-column>

      <el-table-column label="类型" width="100" prop="type">
        <template v-slot:default="{scope,row}">
          <el-tag v-if="row.type=='0'">菜单-页面</el-tag>
          <el-tag v-else type="danger">功能-权限</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="图标" width="128" align="center" style="background-color: black">
        <template v-slot:default="{scope,row}">
          <div style="background-color: #e6a23c;width: 30px;text-align: center;margin: auto">
          <i v-if="row.icon_type=='el'" :class="row.icon" style="color:white"></i>
           <svg-icon v-else :icon-class="row.icon" :icon-name="row.icon" :style="{color:'white'}"></svg-icon>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="路由路径" width="180" prop="path"></el-table-column>

      <el-table-column label="排序" width="120" prop="sort" align="center"></el-table-column>


      <el-table-column align="center" label="操作" width="180"  >
        <template v-slot:default="{scope,row}">
          <el-button type="success" size="mini" icon="el-icon-edit" circle
                     @click="editData(row)"
          ></el-button>
          <el-button type="info" size="mini" icon="el-icon-document-copy" title="复制" circle
                     @click="copy(row.id)"
          ></el-button>
          <el-button type="danger" size="mini" icon="el-icon-delete" circle @click="del(row.id)"></el-button>
        </template>
      </el-table-column>
    </el-table>

  </div>


    <!-- 弹窗：新增/编辑 -->
    <el-dialog
            :title="form.id ? '编辑' : '新增'"
            :visible.sync="dialogVisible"
            width="600px"
            top="5vh"
            :close-on-click-modal="false"
            append-to-body
    >
        <el-form :model="form" label-width="100px">
            <el-form-item label="名称" required>
                <el-input v-model="form.title" autocomplete="off" placeholder="请输入"  />
            </el-form-item>
            <el-form-item label="类型" required>
                <el-radio-group v-model="form.type">
                    <el-radio label="0">菜单-页面</el-radio>
                    <el-radio label="1">功能-权限</el-radio>
                </el-radio-group>
            </el-form-item>


            <el-form-item label="上级" required>
                  <el-cascader
                    v-model="form.parent_id"
                    :options="option_list"
                    :props="{
                      checkStrictly: true,
                      emitPath: false,
                      value: 'id',
                      label: 'label',
                      children: 'children'
                    }"
                    placeholder="请选择上级"
                    clearable
                    style="width: 100%"
                  ></el-cascader>
                </el-form-item>

            <el-form-item label="隐藏菜单" >
              <el-switch v-model="form.hidden" active-value="1" inactive-value="0" ></el-switch>
            </el-form-item>
            <el-form-item label="路由" required>
                <el-input v-model="form.path" placeholder="请输入，如:features/index"  autocomplete="off" />
            </el-form-item>
            <el-form-item label="排序" required>
                <el-input v-model="form.sort" placeholder="请输入，越大越靠前" autocomplete="off" />
            </el-form-item>
             <!--<el-form-item label="图标" prop="icon">
              <el-input v-model="form.icon" placeholder="图片"/>
              <span class="el-form-item__info"
              >可以用element UI的图标class列名称，也可以用svg图标（自己放置在对应的src/icons/svg下面）</span>
            </el-form-item>-->
            <el-form-item label="图标" prop="icon">
                <el-input v-model="form.icon" placeholder="请输入图标类名" style="width: calc(100% - 40px)" ></el-input>
              <el-button icon="el-icon-search" @click="iconDialogVisible = true" style="margin-left: 5px"></el-button>
              <div class="el-form-item__info">
                可以用 Element UI 的图标 class 名称，例如：el-icon-user
              </div>
            </el-form-item>


        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button type="primary" @click="saveData">保存</el-button>
        </div>
    </el-dialog>

    <el-dialog
      title="选择图标"
      :visible.sync="iconDialogVisible"
      width="600px"
    >
      <div class="icon-grid">
        <div
          v-for="icon in elementIcons"
          :key="icon"
          class="icon-item"
          @click="selectIcon(icon)"
        >
          <i :class="icon"></i>
          <span>{{ icon }}</span>
        </div>
      </div>
    </el-dialog>

</div>
{/block}

{block name="script"}
<script>
    var api_base = '/menus';
    new Vue({
        el: '#app',
        data() {
            return {
                dialogVisible: false,
                list: null,
                listLoading: true,
                total: 0,
                searchForm: {
                    keyword: '',
                    from: ''
                },
                form: {
                    type: '1',//0=菜单-页面；1=功能-权限
                    id: 0,
                    parent_id: 0,
                    parent_name: '',
                    icon: '',
                    hidden: 0,
                    path: '',
                    title: '',
                    sort: '',
                },
                option_list:[],
                listQuery:{
                    page: 1,
                    limit: 10
                },
                iconDialogVisible: false,
                elementIcons: [
                  "el-icon-platform-eleme", "el-icon-eleme", "el-icon-delete-solid", "el-icon-delete",
                  "el-icon-s-tools", "el-icon-setting", "el-icon-user-solid", "el-icon-user",
                  "el-icon-phone", "el-icon-phone-outline", "el-icon-more", "el-icon-more-outline",
                  "el-icon-star-on", "el-icon-star-off", "el-icon-s-goods", "el-icon-goods",
                  "el-icon-warning", "el-icon-warning-outline", "el-icon-question", "el-icon-info",
                  "el-icon-remove", "el-icon-circle-plus", "el-icon-success", "el-icon-error",
                  "el-icon-zoom-in", "el-icon-zoom-out", "el-icon-remove-outline", "el-icon-circle-plus-outline",
                  "el-icon-circle-check", "el-icon-circle-close", "el-icon-s-help", "el-icon-help",
                  "el-icon-minus", "el-icon-plus", "el-icon-check", "el-icon-close",
                  "el-icon-picture", "el-icon-picture-outline", "el-icon-picture-outline-round", "el-icon-upload",
                  "el-icon-upload2", "el-icon-download", "el-icon-camera-solid", "el-icon-camera",
                  "el-icon-video-camera-solid", "el-icon-video-camera", "el-icon-message-solid", "el-icon-message",
                  "el-icon-bell", "el-icon-s-cooperation", "el-icon-s-order", "el-icon-s-platform",
                  "el-icon-s-fold", "el-icon-s-unfold", "el-icon-s-operation", "el-icon-s-promotion",
                  "el-icon-s-home", "el-icon-s-release", "el-icon-s-ticket", "el-icon-s-management",
                  "el-icon-s-open", "el-icon-s-shop", "el-icon-s-marketing", "el-icon-s-flag",
                  "el-icon-s-comment", "el-icon-s-finance", "el-icon-s-claim", "el-icon-s-custom",
                  "el-icon-s-opportunity", "el-icon-s-data", "el-icon-s-check", "el-icon-s-grid",
                  "el-icon-menu", "el-icon-share", "el-icon-d-caret", "el-icon-caret-left",
                  "el-icon-caret-right", "el-icon-caret-bottom", "el-icon-caret-top", "el-icon-bottom-left",
                  "el-icon-bottom-right", "el-icon-back", "el-icon-right", "el-icon-bottom",
                  "el-icon-top", "el-icon-top-left", "el-icon-top-right", "el-icon-arrow-left",
                  "el-icon-arrow-right", "el-icon-arrow-down", "el-icon-arrow-up", "el-icon-d-arrow-left",
                  "el-icon-d-arrow-right", "el-icon-video-pause", "el-icon-video-play", "el-icon-refresh",
                  "el-icon-refresh-right", "el-icon-refresh-left", "el-icon-finished", "el-icon-sort",
                  "el-icon-sort-up", "el-icon-sort-down", "el-icon-rank", "el-icon-loading",
                  "el-icon-view", "el-icon-c-scale-to-original", "el-icon-date", "el-icon-edit",
                  "el-icon-edit-outline", "el-icon-folder", "el-icon-folder-opened", "el-icon-folder-add",
                  "el-icon-folder-remove", "el-icon-folder-delete", "el-icon-folder-checked", "el-icon-tickets",
                  "el-icon-document-remove", "el-icon-document-delete", "el-icon-document-copy", "el-icon-document-checked",
                  "el-icon-document", "el-icon-document-add", "el-icon-printer", "el-icon-paperclip",
                  "el-icon-takeaway-box", "el-icon-search", "el-icon-monitor", "el-icon-attract",
                  "el-icon-mobile", "el-icon-scissors", "el-icon-umbrella", "el-icon-headset",
                  "el-icon-brush", "el-icon-mouse", "el-icon-coordinate", "el-icon-magic-stick",
                  "el-icon-reading", "el-icon-data-line", "el-icon-data-board", "el-icon-pie-chart",
                  "el-icon-data-analysis", "el-icon-collection-tag", "el-icon-film", "el-icon-suitcase",
                  "el-icon-suitcase-1", "el-icon-receiving", "el-icon-collection", "el-icon-files",
                  "el-icon-notebook-1", "el-icon-notebook-2", "el-icon-toilet-paper", "el-icon-office-building",
                  "el-icon-school", "el-icon-table-lamp", "el-icon-house", "el-icon-no-smoking",
                  "el-icon-smoking", "el-icon-shopping-cart-full", "el-icon-shopping-cart-1", "el-icon-shopping-cart-2",
                  "el-icon-shopping-bag-1", "el-icon-shopping-bag-2", "el-icon-sold-out", "el-icon-sell",
                  "el-icon-present", "el-icon-box", "el-icon-bank-card", "el-icon-money",
                  "el-icon-coin", "el-icon-wallet", "el-icon-discount", "el-icon-price-tag",
                  "el-icon-news", "el-icon-guide", "el-icon-male", "el-icon-female",
                  "el-icon-thumb", "el-icon-cpu", "el-icon-link", "el-icon-connection",
                  "el-icon-open", "el-icon-turn-off", "el-icon-set-up", "el-icon-chat-round",
                  "el-icon-chat-line-round", "el-icon-chat-square", "el-icon-chat-dot-round", "el-icon-chat-dot-square",
                  "el-icon-chat-line-square", "el-icon-message", "el-icon-postcard", "el-icon-position",
                  "el-icon-turn-off-microphone", "el-icon-microphone", "el-icon-close-notification", "el-icon-bangzhu",
                  "el-icon-time", "el-icon-odometer", "el-icon-crop", "el-icon-aim",
                  "el-icon-switch-button", "el-icon-full-screen", "el-icon-copy-document", "el-icon-mic",
                  "el-icon-stopwatch", "el-icon-medal-1", "el-icon-medal", "el-icon-trophy",
                  "el-icon-trophy-1", "el-icon-first-aid-kit", "el-icon-discover", "el-icon-place",
                  "el-icon-location", "el-icon-location-outline", "el-icon-location-information", "el-icon-add-location",
                  "el-icon-delete-location", "el-icon-map-location", "el-icon-alarm-clock", "el-icon-timer",
                  "el-icon-watch-1", "el-icon-watch", "el-icon-lock", "el-icon-unlock",
                  "el-icon-key", "el-icon-service", "el-icon-mobile-phone", "el-icon-bicycle",
                  "el-icon-truck", "el-icon-ship", "el-icon-basketball", "el-icon-football",
                  "el-icon-soccer", "el-icon-baseball", "el-icon-wind-power", "el-icon-light-rain",
                  "el-icon-lightning", "el-icon-heavy-rain", "el-icon-sunny", "el-icon-cloudy",
                  "el-icon-partly-cloudy", "el-icon-snowy", "el-icon-moon", "el-icon-moon-night",
                  "el-icon-dish", "el-icon-dish-1", "el-icon-food", "el-icon-chicken",
                  "el-icon-fork-spoon", "el-icon-knife-fork", "el-icon-burger", "el-icon-tableware",
                  "el-icon-sugar", "el-icon-dessert", "el-icon-ice-cream", "el-icon-hot-water",
                  "el-icon-water-cup", "el-icon-coffee-cup", "el-icon-cold-drink", "el-icon-goblet",
                  "el-icon-goblet-full", "el-icon-goblet-square", "el-icon-goblet-square-full", "el-icon-refrigerator",
                  "el-icon-grape", "el-icon-watermelon", "el-icon-cherry", "el-icon-apple",
                  "el-icon-pear", "el-icon-orange", "el-icon-coffee", "el-icon-ice-tea",
                  "el-icon-ice-drink", "el-icon-milk-tea", "el-icon-potato", "el-icon-chips",
                  "el-icon-bread", "el-icon-pizza", "el-icon-cake", "el-icon-donut",
                  "el-icon-biscuit", "el-icon-candy", "el-icon-chocolate", "el-icon-ice-cream-square",
                  "el-icon-ice-cream-round"
                ]
            };
        },
        watch:{
            "form.parent_id":function(val){
              if (!val){
                  this.form.parent_name = '顶级';
              }
            }
        },
        methods: {
             load(tree, treeNode, resolve) {
                  get(api_base+'/list',{ parent_id: tree.id, getChild: 1 }).then(response => {
                    setTimeout(() => {
                      resolve(response.data.list)
                    }, 100)
                  })
                },
                handleCategorySelect(category) {
                  this.searchForm.parent_id = category
                },
                fetchData() {
                  this.listLoading = true
                  get(api_base+'/list',this.listQuery).then(response => {
                    this.list = response.data.data
                    this.listLoading = false
                  })
                },
                search() {
                  this.listQuery.page = 1
                  this.listQuery = Object.assign(this.listQuery, this.searchForm)
                  this.fetchData()
                },
                del(id) {
                  this.$confirm('此操作将删除此分类, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                  }).then(() => {
                    del(api_base+'/delete',{ id: id }).then(res => {
                      this.$message({
                        type: 'success',
                        message: res.msg
                      })
                      this.fetchData()
                    })
                  }).catch(() => {

                  })
                },
                copy(id) {
                  this.$confirm('是否复制该数据?, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                  }).then(() => {
                    post(api_base+'/copy',{ id: id }).then((res) => {
                      this.fetchData()
                      this.$message({
                        type: 'success',
                        message: '复制成功!'
                      })
                    })

                  }).catch(() => {
                    this.$message({
                      type: 'info',
                      message: '已取消复制'
                    })
                  })
                },
             openDialog() {
                Object.keys(this.form).forEach(key => {
                  this.form[key] = '';
                });
                this.form.parent_id = 0; // 默认顶级
                this.dialogVisible = true;
            },
            editData(row) {
                this.form = Object.assign({}, row);
                if (this.form.parent_id == null) {
                  this.form.parent_id = 0;
                }
                this.dialogVisible = true;
            },
            saveData() {
                (this.form.id? put(api_base+'/save', this.form) : post(api_base+'/save', this.form))
                    .then(res => {
                        if (res.code != 0) {
                            this.$message.error(res.msg || '保存失败');
                            return;
                        }
                        this.$message.success(this.form.id ? '已更新' : '已新增');
                        this.dialogVisible = false;
                        this.fetchData(true);
                    }).catch(error => {
                    console.error('保存功能失败:', error);
                });
            },
               //下拉选项
            listOptions() {
                this.listLoading = true
                get(api_base+'/list_options').then(res => {
                      if (res.code === 0){
                          const topLevel = { id: 0, label: '顶级', children: [] };
                          this.option_list = [topLevel, ...res.data.list];
                      }
                })
            },
             handleNodeClick(data) {
              this.form.parent_name = data.label
              this.form.parent_id = data.id
            },
            selectIcon(icon) {
              this.form.icon = icon;
              this.iconDialogVisible = false;
            }
        },
        mounted() {
            this.fetchData();
            this.listOptions();
        }
    });
</script>
{/block}
